<template>
	<view class="content">
		<view class="app-title ac">
			<view class="fl" @click="back"><image class="back" src="/static/img/back.png"></image></view>历史报警
		</view>
		
		<view class="my-work ac">
			<view class="fl menu ac"><view :class="{on:tab == 0}" @click="setTab(0)"><b>实时报警</b></view><view class="num ac">8</view></view>
			<view class="fl menu ac"><view :class="{on:tab == 1}" @click="setTab(1)"><b>历史报警</b></view><view class="num ac">8</view></view>
			<view class="fl menu ac" @click="show_search = true"><view>筛选<image class="select" src="/static/img/select.png"></image></view></view>
			
			<view class="clearfix"></view>
		</view>
		
		<view class="work-item">
			<view class="item" @click="jumpDetail">
				<view class="date">2021-08-06 12:37:09<view class="fr">查看详情<image class="arrow" src="/static/img/arrow.png"></image></view></view>
				<view class="name"><b>龙阳路站更换岔道</b></view>
				<view><view class="f-opactiy">报警原因：</view>HMI故障或CATS通信中断</view>
				<view><view class="f-opactiy">恢复时间：</view>2021-08-06 12:37:09</view>
				<image src="/static/img/untreated.png" class="item-status"></image>
			</view>
			<view class="item" @click="jumpDetail">
				<view class="date">2021-08-06 12:37:09<view class="fr">查看详情<image class="arrow" src="/static/img/arrow.png"></image></view></view>
				<view class="name"><b>龙阳路站更换岔道</b></view>
				<view><view class="f-opactiy">报警原因：</view>HMI故障或CATS通信中断</view>
				<view><view class="f-opactiy">恢复时间：</view>2021-08-06 12:37:09</view>
				<image src="/static/img/over.png" class="item-status"></image>
			</view>
		</view>
		
		<HistoryAlarmSearch v-show="show_search" @closeFull="closeFull"></HistoryAlarmSearch>
	</view>
</template>

<script>
import HistoryAlarmSearch from '../../components/alarm/historyAlarmSearch'
export default{
	components:{HistoryAlarmSearch},
	data() {
		return {
			tab:1,
			start : '',
			end : '',
			show_search : false
		}
	},
	methods: {
		back() {
			uni.navigateBack();
		},
		setTab(i) {
			if(this.tab == i) return;
			this.tab = i;
		},
		closeFull(obj) {
			if(obj) {
				this.start = obj.start;
				this.end = obj.end;
				this.show_date = true;
			}
			this.show_search = false;
		},
		jumpDetail(url){
			uni.navigateTo({
			    url: '/pages/alarm/alarmDetail'
			});
		}
	}
}
</script>

<style scoped>
	.my-work{
		background:#fff;margin-bottom: 16px;box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
	}
	.my-work>.menu{
		width: 37.5%;color: #3E3A39;line-height: 54px;position: relative;
	}
	.my-work>.menu:nth-child(3){
		border-left: 1px solid #d7d7d7;width: 25%;
	}
	.my-work>.menu view{
		display: inline-block;
	}
	.my-work>.menu>.on{
		color: #307BE0;border-bottom: 2px solid #307BE0;
	}
	.my-work>.menu>.num{
		position: absolute;top:10px;right:20%;background:#FA5151;width: 15px;height: 15px;font-size: 10px;border-radius: 50%;color: #fff;line-height: 14px;
	}
	.select{
		width: 15px;height: 15px;margin-left: 5px;vertical-align: middle;
	}
	.work-item{
		width: 91.5%;margin: 0 auto;
	}
	.work-item>.item{
		background: #FFFFFF;box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);border-radius: 6px;padding: 0 0 16px 16px;font-size: 14px;margin-bottom: 16px;color: #3E3A39;position: relative;
	}
	.work-item>.item>.name{
		margin-bottom: 10px;
	}
	.work-item>.item>view:nth-child(3){
		margin-bottom: 6px;
	}
	.work-item>.item>.item-status{
		position: absolute;width: 60px;height: 60px;right: 0;bottom: 16px;
	}
	.work-item>.item>.date{
		line-height: 46px;font-size: 14px;border-bottom: 1px solid #F1F1F1;padding-right: 20px;margin-bottom: 10px;
	}
	.arrow{
		width: 7px;height: 12px;margin-left: 7px;vertical-align: middle;
	}
	.f-opactiy{
		display: inline-block;
	}
</style>
